<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a page</title>
<style>
.ct {
	width: 910px;
	margin: auto;
}

.main {
	float: left;
	width: 450px;
	height: 300px;
	border: 1px solid #ccc;
}

.main input {
	margin: 20px;
	width: 200px;
}

.iframe {
	float: right;
}

iframe {
	width: 450px;
	height: 300px;
	border: 1px dashed #ccc;
}
</style>

</head>
<body>
	<div class="ct">
		<h1>降域</h1>
		<div class="main">
			<input type="text" placeholder="http://a.cors.com/a.html">
		</div>
		<iframe src="http://b.cors.com/b.html"></iframe>
	</div>
	<script>
		//URL: http://a.cors.com/a.html
		document
				.querySelector('.main input')
				.addEventListener(
						'input',
						function() {
							console.log(this.value);
							window.frames[0].document.querySelector('input').value = this.value;
						})
		document.domain = "cors.com"
	</script>
</body>


</html>
